import { View, Text, Button, Form, Image, Input } from '@tarojs/components'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { useBoolean, useRequest, useSetState } from 'ahooks'
import { fetchWithdrawRmb, getWithdrawConfig } from '@/api'

import './rmb.module.scss'

export default function Index() {
  const [showWeixin, { setFalse, setTrue }] = useBoolean(false)

  const { loading, run } = useRequest(fetchWithdrawRmb, {
    manual: true,
    onSuccess: () => {
      Taro.showToast({ title: '提现成功', icon: 'success' })
      setTrue()
    }
  })

  const [form, setForm] = useSetState({
    name: '',
    accno: '',
    value: getCurrentInstance?.().router?.params?.price || 0,
  });

  const { data: { data: config = {} } = {} } = useRequest(getWithdrawConfig, {
    onSuccess: (res) => {
      // console.log(res);
      if (res?.code == 0) {
        form.name = res?.data?.acc_name
        form.accno = res?.data?.acc_no
      }
    }
  })

  const updataPassword = async () => {
    const params = getCurrentInstance?.().router?.params
    const formData = {
      type: params?.type,
      // value: params?.price || 0,
      ...form
    }
    if (!formData?.value || !formData?.type) return Taro.showToast({ title: '系统异常，请稍后重试', icon: 'none' })
    if (!formData?.name) return Taro.showToast({ title: '支付宝姓名不能为空', icon: 'none' })
    if (!formData?.accno) return Taro.showToast({ title: '支付宝账号不能为空', icon: 'none' })
    run(formData)
  }
  
function convertToUtf8(mojibakeStr) {
  // 假设乱码是由ISO-8859-1转换成UTF-8的，下面是转换的代码示例
  let binaryStr = '';
  for (let i = 0; i < mojibakeStr.length; i++) {
    binaryStr += mojibakeStr.charCodeAt(i).toString(2);
  }
  // 假设乱码是单字节的ISO-8859-1编码，直接用TextEncoder转换成UTF-8
  const encoder = new TextEncoder();
  const utf8Array = encoder.encode(mojibakeStr);
  const utf8Str = String.fromCharCode.apply(null, utf8Array);
  return utf8Str;
}
  
  return (
    <View className='withdraw-rmb-box padding'>
      <View className='money-box margin-top-xl'>
        <Form onSubmit={updataPassword}>
        <View className='flex margin-bottom-sm'>
            <Text className='margin-right-sm'>支付宝姓名</Text><br/>
            <Input className='flex-sub' value={form.name} onInput={e => setForm({ name: e?.target?.value || '' })} placeholder='请输入您的支付宝姓名' />
          </View>
          <View className='flex margin-bottom-sm'>
            <Text className='margin-right-sm'>支付宝账号</Text><br/>
            <Input className='flex-sub' value={form.accno} onInput={e => setForm({ accno: e?.target?.value || '' })} placeholder='请输入您的支付宝手机' />
          </View>

          <View> <Text className='margin-right-sm'>提现到账金额</Text></View>
          <View className='margin-tb flex align-center'>
            <View className='flex-sub flex align-center solid-bottom'>
              <Input onInput={e => setForm({ value: e?.target?.value || '' })} value={form.value} className='flex-sub padding-right text-xl' style={{ height: '100rpx' }} name='value' placeholder='请输入金额' />
              <Text className='margin-right-sm'>元</Text>
            </View>  
          </View>
          <View className='text-sm text-99'>
            
              {decodeURI(getCurrentInstance?.().router?.params?.hint || '')}
          </View>

          <Button
            loading={loading}
            className='main-bc text-lg text-center margin-bottom margin padding-tb-xs round line-white'
            formType='submit'
            style={{ width: '92%'}}
          >
            确认提现
          </Button>
        </Form>
      </View >
      <View className={`cu-modal ${showWeixin ? 'show' : ''}`} onClick={setFalse}>
        <View className='cu-dialog' onClick={e => e?.stopPropagation()}>
          <View className='padding'>
            <Image
              className='modals-img'
              src={config?.url}
              show-menu-by-longpress
              mode='heightFix'
            />
          </View>
          <View className='flex-center'>
            <Button
              onClick={setFalse}
              className='main-bc text-lg text-center margin padding-lr-xl round line-white'
              formType='submit'
            >
              &emsp;关闭&emsp;
            </Button>
          </View>
        </View>
      </View>
    </View>
  )
}
